<!-- Vue 3 单文件组件，使用 <script setup> 语法糖 -->
<!-- 展示 Vue 生命周期钩子中 DOM 元素的可访问性差异 -->
<script setup>
// 从 Vue 中导入两个生命周期钩子函数
// onBeforeMount: 在组件 DOM 实际渲染挂载之前调用
// onMounted: 在组件 DOM 渲染挂载完成之后调用
import { onBeforeMount, onMounted } from "vue";

// 注册 onBeforeMount 钩子函数
// 此时组件的模板已经编译完成，但尚未渲染到页面 DOM 中
onBeforeMount(() => {
    // 尝试获取 .container 元素
    // 由于 DOM 尚未挂载，这里会返回 null
    console.log("DOM元素渲染前", document.querySelector('.container'));
})

// 注册 onMounted 钩子函数
// 此时组件的 DOM 已经完全渲染并挂载到页面中
onMounted(() => {
    // 此时可以成功获取到 .container 元素
    // 因为 DOM 已经完成挂载
    console.log("DOM元素渲染后", document.querySelector('.container'));
})
</script>

<!-- 模板部分：定义组件的 DOM 结构 -->
<template>
    <!-- 定义一个带有 container 类名的 div 元素 -->
    <!-- 这个元素会在 onMounted 阶段完成渲染并挂载到页面 -->
    <div class="container">container</div>
</template>

<!-- 样式部分：当前组件没有定义具体样式 -->
<!-- scoped 属性确保即使有样式也只作用于当前组件 -->
<style scoped>

</style>